<template>
  <div class="working-box">
    <div class="image-area">
      <div class="tool-bar">
        <el-button type="primary" @click="addAnnMarkbtn" class="save-btn">保存标注</el-button>
        <el-button type="primary" class="save-btn">同步文件</el-button>
      </div>
<!--      <el-button-group>-->
<!--        <el-button size="mini" @click="selectTool(0)">矩形</el-button>-->
<!--      </el-button-group>-->
      <el-button size="mini" type="success" @click="selectTool(0)">矩形</el-button>
      <el-button size="mini" type="primary" @click="preMarkbtn">上一张</el-button>
      <el-button size="mini" type="primary" @click="nextMarkbtn">下一张</el-button>
      <div id="map" ref="map"></div>
    </div>
    <div class="label-area">
      <h3>
        标签栏
        <el-button type="text" @click="addLabel" icon="el-icon-plus" class="add-btn">添加</el-button>
      </h3>
      <div class="l-a-serch">
      </div>
      <p class="l-a-hint">请根据图片内容选择唯一标签</p>
      <ul class="l-a-lis">
        <li v-for="(e, i) in lanleList" :key="i" @click="doTask(i)" :class="{ active: i == labelsActive }">
          <span class="lis-word">{{ e.name }}</span>
          <span class="lis-shortcut">快捷键</span>
          <span class="">{{ i + 1 }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
//import { addAnnFileLabel } from '@/api/annFileLabel.js'
import Konva from "konva";
import {getAnnFiles} from '@/api/annFile'
import {Base64} from "js-base64";
import {domain} from "@/config";
import {addAnnMark, getCoordinate} from "@/api/dataset";
import {getAllAnnLabels} from '@/api/annLabel'

export default {
  data() {
    return {
      imgTotalPage: 0,//图片总页数
      imgTotal: 0,//图片总数
      lanleList: [],//标签
      labelsActive: 0,//当前标签下标
      ann_task_id: this.$route.query.ann_task_id,
      dataset_id: this.$route.query.id,
      imgList: [],//图片
      imglistIndex: 0,//当前图片下标
      newimg: [{
        url: 'https://storage.shujiajia.com/crowd/manager/crowdcmnbanner/2020101615305270_%E4%BA%BA%E4%BD%93%E6%8B%89%E6%A1%86%E6%A0%B7%E4%BE%8B%E5%9B%BE.png?Expires=4102329599&OSSAccessKeyId=LTAISTjmNntF8KaO&Signature=IxV2y8C5a3P0jL6GW54aG0lLOms%3D',
      }, {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }],
      rect: false,
      poly: false,
      stage: null,
      layer: null,
      shape: null,
      image: {src: null},
      currentTool: "",
      toolObject: [
        {
          name: "rect",
          type: "rect",
          /* 矩形颜色 */ color: "#75fb4c",
          /* 边框颜色 */ lineColor: "#75fb4c",
          /* 顶点颜色 */ anchorColor: "green",
        },
        {
          name: "poly",
          type: "poly",
          /* 矩形颜色 */ color: "#E63F00",
          /* 边框颜色 */ lineColor: "#E63F00 ",
          /* 顶点颜色 */ anchorColor: "red",
        },
      ],
      drawing: false, //一开始不能绘画
      currentDrawingShape: null, //现在绘画的图形
      rectPoints: [], //存储矩形的各个顶点的数组
      polygonPoints: [], //存储绘画多边形各个顶点的数组
      stageWidth: 0, //舞台宽
      stageHeight: 0, //舞台高
      scale: 1, //窗口变化的缩放比例
      currentDel: null, //删除对象
      currentCancel: null, //删除对象
      mouseOffsetX: 0,
      mouseOffsetY: 0,
      mouseOffsetList: [],
      label: "图片", //标签
      // 获取图片数据
      pageNum: 1,
      pageSize: 3,
      currsrc: '',
    };
  },
  computed: {
    computePaging() {
      let w = document.documentElement.clientWidth
      let navW = localStorage.getItem('menu_project') == 'false' ? 257 : 65
      let boxWidth = w - navW - 290 - 64 - 32 - 20 - 80
      if (w < 1560) {
        boxWidth = w - navW - 64 - 32 - 20 - 80
      }
      return parseInt(boxWidth / 240)
    },
  },
  methods: {
    // 切换上一张图片
    preMarkbtn() {
      if (this.pageNum == 1 && this.imglistIndex == 0){
        this.$message.error('当前为第一张图片')
        return
      }
      // 获取数组,上一页
      if (this.pageNum > 1 && this.imglistIndex == 0) {
        this.pageNum = this.pageNum-1
        this.getImgList().then(res => {
          this.imglistIndex = res.data.list.length-1
          this.getImgAnCor()
        })
      }
      // 上一张图片
      if (this.imglistIndex > 0){
        this.imglistIndex -= 1
        this.getImgAnCor()
      }
    },
    // 切换下一张图片
    nextMarkbtn() {
      if (this.pageNum == this.imgTotalPage && this.imglistIndex == this.imgList.length - 1){
        this.$message.error('当前已为最后一页')
        return
      }
      // 获取数组,下一页
      if (this.pageNum < this.imgTotalPage && this.imglistIndex == this.imgList.length - 1) {
        this.pageNum = this.pageNum+1
        this.getImgList().then(res => {
          this.imgTotalPage = res.data.total_page
          this.imglistIndex = 0
          this.getImgAnCor()
        })
      }
      if (this.imglistIndex < this.imgList.length - 1){
        this.imglistIndex += 1
        this.getImgAnCor()
      }
    },
    getImgAnCor() {
      console.log('当前',this.layer)
      //切换图片
      this.stageWidth = this.$refs.map.clientWidth;
      this.stageHeight = this.$refs.map.clientHeight;
      let vc_this = this;
      let imageObj = new Image();
      // imageObj.src = this.newimg[this.imglistIndex].url
      imageObj.src = this.imgList[this.imglistIndex].imgUrl
      console.log('bendi',this.imgList[this.imglistIndex].imgUrl)
      // imageObj.src = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      imageObj.onload = function () {
        vc_this.shape = new Konva.Image({
          image: imageObj,
          width: vc_this.stageWidth,
          height: vc_this.stageHeight,
        });
        console.log('现在的layer', vc_this.layer)
        // 清空当前
        vc_this.layer.children = []
        vc_this.layer.add(vc_this.shape);
        // 生成标注框
        vc_this.getCoor()
        console.log('当前layer', vc_this.layer)
        vc_this.layer.draw()
      };
    },
    // 切换标签
    doTask(i) {
      this.labelsActive = i;
    },
    // 获取标注框 生成标注
    async getCoor() {
      let res = await getCoordinate({annTaskId: this.ann_task_id, annFileId: this.imgList[this.imglistIndex].id})
      let imgW = document.getElementById('map').offsetWidth
      let imgH = document.getElementById('map').offsetHeight
      console.log("坐标", res)
      let cortmp = []
      let tmpTool = this.toolObject[0];
      for (let i = 0; i < res.data.length; i++) {
        let arrtmp = res.data[i].coordinate.split(' ')
        let tmp = {
          x: arrtmp[0] * imgW * 1.00000,
          y: arrtmp[1] * imgH * 1.00000,
          w: arrtmp[2] * imgW * 1.00000,
          h: arrtmp[3] * imgH * 1.00000
        }
        cortmp.push(tmp)
        console.log('tmp', tmp)
      }
      console.log('cortmp', cortmp)
      for (let i = 0; i < cortmp.length; i++) {
        //拖拽组
        let group = new Konva.Group({
          name: this.currentTool.name + "group",
          draggable: true,
        });
        // 定位
        let tmpPoints = [
          cortmp[i].x, cortmp[i].y,//右上
          cortmp[i].x + cortmp[i].w, cortmp[i].y,//右下
          cortmp[i].x + cortmp[i].w, cortmp[i].y + cortmp[i].h,//右下
          cortmp[i].x, cortmp[i].y + cortmp[i].h//左下
        ]

        console.log('tmpPoints', tmpPoints)

        let rectTopLeft = this.drawCircle(tmpTool, cortmp[i].x, cortmp[i].y, group, tmpPoints);
        rectTopLeft.name("rectTopLeft");
        // 添加右上点
        let rectTopRight = this.drawCircle(tmpTool, cortmp[i].x + cortmp[i].w, cortmp[i].y, group, tmpPoints);
        rectTopRight.name("rectTopRight")
        //添加右下点
        let rectBottomRight = this.drawCircle(tmpTool, cortmp[i].x + cortmp[i].w, cortmp[i].y + cortmp[i].h, group, tmpPoints);
        rectBottomRight.name("rectBottomRight")
        //添加左下点
        let rectBottomLeft = this.drawCircle(tmpTool, cortmp[i].x, cortmp[i].y + cortmp[i].h, group, tmpPoints);
        rectBottomLeft.name("rectBottomLeft")


        let tmpRect = this.drawRect(tmpTool, cortmp[i].x, cortmp[i].y, group)

        tmpRect.attrs.height = cortmp[i].h
        tmpRect.attrs.width = cortmp[i].w
        this.drawLine(tmpTool, tmpPoints, group);
        //添加标签
        this.drawLabel(
          tmpTool,
          tmpRect.getClientRect().x,
          tmpRect.getClientRect().y,
          group,
          res.data[i].ann_label_name
        );
        this.layer.add(group);
        console.log(222222)
        // this.layer.draw();
        this.currentCancel = group;
        this.stage.find("Circle").forEach((element) => {
          element.moveToTop();
        });

      }
      console.log("layer创建", this.layer)
    },
    // 获取标签
    async getAllLabel() {
      await getAllAnnLabels({annTaskId: this.ann_task_id}).then((res) => {
        this.lanleList = res.data
      })
    },
    // 保存标注 矩形
    async addAnnMarkbtn() {
      console.log("layer保存标注", this.layer)
      let maklist = []
      let imgW = document.getElementById('map').offsetWidth
      let imgH = document.getElementById('map').offsetHeight
      for (let i = 1; i < this.layer.children.length; i++) {
        let group = this.layer.children[i]
        let xmini = (group.children[0].attrs.x * 1.00) / imgW
        let ymini = (group.children[0].attrs.y * 1.00) / imgH
        let wmini = (group.children[0].attrs.width * 1.00) / imgW
        let hmini = (group.children[0].attrs.height * 1.00) / imgH
        let tmp = {
          ann_file_id: this.imgList[this.imglistIndex].id,
          ann_label_id: this.lanleList[this.labelsActive].id,
          ann_task_id: this.ann_task_id,
          coordinate: xmini + ' ' + ymini + ' ' + wmini + ' ' + hmini
        }
        maklist.push(tmp)
        console.log("group", group)
      }
      await addAnnMark(maklist).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功")
          this.upImgUrlPre('nex')
        }
      })
    },
    // 添加标签
    addLabel() {
      this.$EventBus.$emit('addLabel')
    },
    // 获取图片
    async getImgList() {
      let res = await getAnnFiles({pageNum: this.pageNum, pageSize: this.pageSize, annTaskId: this.ann_task_id})
      this.imgList = res.data.list
      this.imgTotal = res.data.total
      this.imgTotalPage = res.data.total_page
      this.setDataImgSrc(this.imgList)
      console.log("图片", res)
    },
    // 图片路径
    setDataImgSrc(data) {
      data.forEach((e, i) => {
        let image_name = e.path.substr(e.path.lastIndexOf(this.dataset_id) + this.dataset_id.length + 1)
        console.log("i", i, this.getImgUrl(e.path), image_name)
        data[i].imgUrl = this.getImgUrl(image_name)
        console.log("dataimg", data[i].imgUrl)
      })
    },
    getImgUrl(relative_path) {
      // domain
      // Base64
      return `${domain}file/v1/file/preview/${this.userInfo.id
      }/dataset/${this.$route.query.id
      }/${encodeURIComponent(Base64.encode(relative_path))
      }`
      // return `http://localhost:3000/${relative_path}`
    },
    //选择工具
    selectTool(index) {
      //如果还在绘画，但选择工具，则将正在绘画的图形删除
      if (this.drawing) {
        this.currentDrawingShape.getParent().destroy();
        this.rectPoints = [];
        this.polygonPoints = [];
        this.drawing = false;
        this.layer.draw();
      }
      this.currentTool = this.toolObject[index];
    },
    //重新调整画布
    resizeStage() {
      this.scale = this.$refs.map.clientWidth / this.stageWidth;
      this.stage.width(this.stageWidth * this.scale);
      this.stage.height(this.stageHeight * this.scale);
      this.stage.scale({x: this.scale, y: this.scale});
      //维持原来大小
      this.layer.find("Circle").forEach((element) => {
        element.setAttr("radius", 5 / this.scale / this.layer.scaleX());
      });
      this.layer.find("Label").forEach((element) => {
        element.getText().setAttrs({
          fontSize: 16 / this.scale / this.layer.scaleX(),
          padding: 1 / this.scale / this.layer.scaleX(),
        });
      });
      this.stage.draw();
    },
    /**
     *初始化konva舞台
     */
    initKonvaStage() {
      //1实例化stage层
      this.stageWidth = this.$refs.map.clientWidth;
      this.stageHeight = this.$refs.map.clientHeight;
      this.stage = new Konva.Stage({
        container: "map",
        width: this.stageWidth,
        height: this.stageHeight,
        ignoreStroke: true,
      });
      this.stage.container().style.cursor = "crosshair";
      let vc_this = this;
      //2实例化layer层
      this.layer = new Konva.Layer();
      //3添加layer层
      this.stage.add(this.layer);
      let imageObj = new Image();
      imageObj.src = this.currsrc
      imageObj.onload = function () {
        vc_this.shape = new Konva.Image({
          image: imageObj,
          width: vc_this.stageWidth,
          height: vc_this.stageHeight,
        });
        vc_this.layer.add(vc_this.shape);
        vc_this.getCoor()
        vc_this.layer.draw()
      };
      //给***舞台***绑定事件
      this.stageBindEvent(this);
    },
    /**
     * 舞台绑定的事件 开始标注
     * @param vc_this
     */
    stageBindEvent(vc_this) {
      //鼠标按下
      this.stage.on("mousedown", (e) => {
        //鼠标左键开始
        if (e.evt.button == 0) {
          // if (e.target === vc_this.stage) {
          //   vc_this.$message({
          //     message: "请选择图片！",
          //     type: "warning",
          //     center: true,
          //     duration: 1000,
          //   });
          //   return;
          // }
          // 已选择
          //图形起始点只能在图片层上
          if (e.target === vc_this.shape) {
            //开始初始绘画
            vc_this.stageMousedown(vc_this.currentTool, e);
            return;
          }
          //允许后续点绘画在其他图形上
          if (vc_this.drawing) {
            vc_this.stageMousedown(vc_this.currentTool, e);
            return;
          }
        } else if (e.evt.button == 2) {
          if (vc_this.polygonPoints.length != 0) {
            //最好使用konva提供的鼠标xy点坐标
            let mousePos = vc_this.stage.getPointerPosition();
            //考虑鼠标缩放
            let x =
              (mousePos.x / vc_this.scale - vc_this.layer.getAttr("x")) /
              vc_this.layer.scaleX(),
              y =
                (mousePos.y / vc_this.scale - vc_this.layer.getAttr("y")) /
                vc_this.layer.scaleY();
            //group继续添加多边形的点
            vc_this.drawCircle(
              vc_this.currentTool,
              x,
              y,
              vc_this.currentDrawingShape.getParent(),
              vc_this.polygonPoints
            );
            vc_this.polygonPoints.push(x);
            vc_this.polygonPoints.push(y);
            //绘画多边形
            vc_this.currentDrawingShape.setAttr("points", vc_this.polygonPoints);
            //group继续添加多边形的边
            vc_this.currentDrawingShape
              .getParent()
              .getChildren((node) => {
                return node.getAttr("name") === vc_this.currentTool.name + "line";
              })[0]
              .setAttr("points", vc_this.polygonPoints);
            //判断是否是只有两个点的多边形，如果起点和终点相同，不允许绘画
            if (
              vc_this.currentDrawingShape.points().length == 2 ||
              vc_this.currentDrawingShape.points().length == 4
            ) {
              vc_this.drawing = false;
              vc_this.currentDrawingShape.getParent().destroy();
              vc_this.polygonPoints = [];
              vc_this.$message({
                message: "顶点数必须大于2个！",
                type: "warning",
                center: true,
                duration: 1000,
              });
              return;
            }
            e.cancelBubble = true;
            this.drawing = false;
          }
        }

      });
      //鼠标移动
      this.stage.on("mousemove", () => {
        if (vc_this.currentTool && vc_this.drawing) {
          //绘画中
          vc_this.stageMousemove(vc_this.currentTool);
        }
      });
      //鼠标放开
      vc_this.stage.on("mouseup", (e) => {
        if (e.evt.button == 0) {
          // 矩形
          if (vc_this.currentTool && vc_this.drawing) {
            vc_this.stageMouseup(vc_this.currentTool, e);
          }
        } else if (e.evt.button == 2) {
          if (
            vc_this.currentTool &&
            !vc_this.drawing &&
            vc_this.polygonPoints.length != 0
          ) {
            vc_this.stageMouseup(vc_this.currentTool, e);
          }
        }
      });
      //舞台快捷键
      let container = this.stage.container();
      container.tabIndex = 1;
      container.focus();
      container.addEventListener("keydown", (e) => {
        //删除的快捷键
        if (e.keyCode === 46) {
          console.log("删除对象", this.currentDel)
          if (this.currentDel) {
            this.currentDel.destroy();
            this.currentDel = null;
            this.$message({
              message: "删除成功！",
              type: "success",
              center: true,
              duration: 1000,
            });
          }
        }
        vc_this.stage.container().style.cursor = "crosshair";
        e.preventDefault();
        vc_this.layer.draw();
      });
      container.addEventListener("keydown", (e) => {
        //撤销的快捷键(ctrl+z)
        if (e.ctrlKey == true && e.keyCode == 90) {
          switch (this.currentTool.type) {
            case "rect":
              //正在绘画，直接删除group
              if (this.drawing) {
                this.currentDrawingShape.getParent().destroy();
                this.rectPoints = [];
                this.drawing = false;
              } else {
                //绘画完成，直接删除group
                this.currentCancel.destroy();
                this.rectPoints = [];
                this.drawing = false;
              }
              break;
            case "poly":
              //删除点
              // let y = this.polygonPoints.pop();
              // let x = this.polygonPoints.pop();
              //如果撤销的是第一个点，直接删除group
              if (this.drawing && this.polygonPoints.length == 0) {
                this.currentCancel.destroy();
                this.drawing = false;
              } //如果是已绘画完的多边形
              else if (!this.drawing && this.polygonPoints.length == 0) {
                if (this.currentCancel) {
                  this.currentCancel.destroy();
                  this.currentCancel = null;
                  this.$message({
                    message: "删除成功！",
                    type: "success",
                    center: true,
                    duration: 1000,
                  });
                }
              } else {
                this.currentCancel
                  .getChildren((node) => {
                    return node.x() == x && node.y() == y;
                  })[0]
                  .destroy();
                //重新绘画多边形
                //最好使用konva提供的鼠标xy点坐标
                let mousePos = this.stage.getPointerPosition();
                //考虑鼠标缩放
                let x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
                let y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
                let tempPoints = this.polygonPoints.concat();
                tempPoints.push(x);
                tempPoints.push(y);
                //修改多边形的点
                this.currentCancel
                  .find("." + this.currentTool.name + "poly")[0]
                  .setAttr("points", tempPoints);
                //重新绘画多边形的边
                this.currentCancel
                  .find("." + this.currentTool.name + "line")[0]
                  .setAttr("points", tempPoints);
              }
              break;
          }
        }
        vc_this.stage.container().style.cursor = "crosshair";
        e.preventDefault();
        vc_this.layer.draw();
      });
    },

    /**
     * 在舞台上鼠标点下发生的事件
     * @param currentTool 当前选择的工具
     * @param e 传入的event对象
     */
    stageMousedown(currentTool) {
      if (currentTool.type == null) {
        this.$message({
          message: "请选择标注工具！",
          type: "warning",
          center: true,
          duration: 1000,
        });
        return;
      }

      let mousePos = this.stage.getPointerPosition();
      let x, y
      let group
      switch (currentTool.type) {
        // 绘制矩形
        case "rect":
          //最好使用konva提供的鼠标xy点坐标
          mousePos = this.stage.getPointerPosition();
          console.log("mousePos", mousePos)
          //考虑鼠标缩放
          x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
          y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
          //拖拽组
          group = new Konva.Group({
            name: currentTool.name + "group",
            draggable: true,
          });
          console.log("group", group)
          //添加矩形的初始点
          // eslint-disable-next-line no-case-declarations
          let rectTopLeft = this.drawCircle(currentTool, x, y, group, this.rectPoints);
          //修改矩形顶点名称
          rectTopLeft.name("rectTopLeft");
          //绘制矩形
          this.drawRect(currentTool, x, y, group);
          //添加矩形的边
          this.rectPoints.push(x);
          this.rectPoints.push(y);
          // 绘制线条
          this.drawLine(currentTool, this.rectPoints, group);
          this.layer.add(group);
          this.currentCancel = group;
          this.layer.draw();
          //使所有顶点在顶层显示
          this.stage.find("Circle").forEach((element) => {
            element.moveToTop();
          });
          console.log("group1111", group)
          break;


        case "poly":
          //如果数组长度小于2，初始化多边形和顶点，使它们成为一组,否则什么都不做
          if (this.polygonPoints.length < 2) {
            //最好使用konva提供的鼠标xy点坐标
            mousePos = this.stage.getPointerPosition();
            //考虑鼠标缩放
            x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
            y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
            //拖拽组
            let group = new Konva.Group({
              name: currentTool.name + "group",
              draggable: false,
            });
            this.polygonPoints = [x, y];
            //添加多边形的点
            this.drawCircle(currentTool, x, y, group, this.polygonPoints);

            //绘画多边形
            this.drawPolygon(currentTool, this.polygonPoints, group);
            //添加多边形的边
            this.drawLine(currentTool, this.polygonPoints, group);
            this.layer.add(group);
            this.currentCancel = group;
            //添加标签
            let label = this.drawLabel(currentTool, x, y, group, this.lanleList[this.labelsActive].name);
            label.hide();
            //使所有顶点在顶层显示
            this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            this.layer.draw();
          } //多边形增加顶点
          else {
            //最好使用konva提供的鼠标xy点坐标
            mousePos = this.stage.getPointerPosition();
            //考虑鼠标缩放
            x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
            y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
            //group继续添加多边形的点
            this.drawCircle(
              currentTool,
              x,
              y,
              this.currentDrawingShape.getParent(),
              this.polygonPoints
            );
            this.polygonPoints.push(x);
            this.polygonPoints.push(y);
            //绘画多边形
            this.currentDrawingShape.setAttr("points", this.polygonPoints);
            //group继续添加多边形的边
            this.currentDrawingShape
              .getParent()
              .getChildren((node) => {
                return node.getAttr("name") === currentTool.name + "line";
              })[0]
              .setAttr("points", this.polygonPoints);
            //使所有顶点在顶层显示
            this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            this.layer.draw();
          }
          break;
        default:
          break;
      }
      this.drawing = true;
    },
    /**
     * 鼠标在舞台上移动事件
     * @param currentTool 当前选择的工具
     * @param e 传入的event对象
     */
    stageMousemove(currentTool) {
      let mousePos, x, y, point1, point2, point3, point4
      switch (currentTool.type) {
        case "rect":
          this.stage.container().style.cursor = "crosshair";
          //矩形初始化，鼠标移动操作
          //最好使用konva提供的鼠标xy点坐标
          mousePos = this.stage.getPointerPosition();
          //考虑鼠标缩放
          x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
          y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
          point1 = [this.rectPoints[0], this.rectPoints[1]];
          point2 = [x, this.rectPoints[1]];
          point3 = [x, y];
          point4 = [this.rectPoints[0], y];
          //如果矩形顶点不足创建顶点
          if (this.rectPoints.length < 8) {
            this.rectPoints = point1.concat(point2, point3, point4);
            //删除第一个顶点
            this.currentDrawingShape
              .getParent()
              .getChildren((element) => {
                return element.getAttr("name") === "rectTopLeft";
              })[0].destroy();

            let rectTopLeft = this.drawCircle(
              currentTool,
              point1[0],
              point1[1],
              this.currentDrawingShape.getParent(),
              this.rectPoints
            );
            console.log("currentDrawingShape", this.currentDrawingShape)
            console.log("rectPoints1111", this.rectPoints)

            rectTopLeft.name("rectTopLeft");
            //添加标签
            let label = this.drawLabel(
              currentTool,
              point1[0],
              point1[1],
              this.currentDrawingShape.getParent(),
              this.lanleList[this.labelsActive].name
            );
            label.hide();
            let rectTopRight = this.drawCircle(
              currentTool,
              point2[0],
              point2[1],
              this.currentDrawingShape.getParent(),
              this.rectPoints
            );
            rectTopRight.name("rectTopRight");
            let rectBottomRight = this.drawCircle(
              currentTool,
              point3[0],
              point3[1],
              this.currentDrawingShape.getParent(),
              this.rectPoints
            );
            rectBottomRight.name("rectBottomRight");
            let rectBottomLeft = this.drawCircle(
              currentTool,
              point4[0],
              point4[1],
              this.currentDrawingShape.getParent(),
              this.rectPoints
            );
            rectBottomLeft.name("rectBottomLeft");
          }
          //修改矩形的顶点
          this.rectPoints[2] = point2[0];
          this.rectPoints[3] = point2[1];

          this.rectPoints[4] = point3[0];
          this.rectPoints[5] = point3[1];

          this.rectPoints[6] = point4[0];
          this.rectPoints[7] = point4[1];
          this.currentDrawingShape
            .getParent()
            .getChildren((node) => {
              return node.getAttr("name") === "rectTopRight";
            })[0]
            .setAttrs({
              x: point2[0],
              y: point2[1],
            });
          this.currentDrawingShape
            .getParent()
            .getChildren((node) => {
              return node.getAttr("name") === "rectBottomRight";
            })[0]
            .setAttrs({
              x: point3[0],
              y: point3[1],
            });
          this.currentDrawingShape
            .getParent()
            .getChildren((node) => {
              return node.getAttr("name") === "rectBottomLeft";
            })[0].setAttrs({
            x: point4[0],
            y: point4[1],
          });
          //添加矩形的边
          this.currentDrawingShape
            .getParent()
            .getChildren((node) => {
              return node.getAttr("name") === currentTool.name + "line";
            })[0]
            .setAttr("points", this.rectPoints);
          this.currentDrawingShape.setAttrs({
            width: x - this.rectPoints[0],
            height: y - this.rectPoints[1],
          });
          //使所有顶点在顶层显示
          this.stage.find("Circle").forEach((element) => {
            element.moveToTop();
          });
          break;


        case "poly":
          this.stage.container().style.cursor = "crosshair";
          //多边形初始化后，如果数组长度大于2，鼠标移动时，实时更新下一个点
          if (this.polygonPoints.length >= 2) {
            let mousePos = this.stage.getPointerPosition();
            let x = (mousePos.x / this.scale - this.layer.getAttr("x")) / this.layer.scaleX()
            let y = (mousePos.y / this.scale - this.layer.getAttr("y")) / this.layer.scaleY();
            let tempPoints = this.polygonPoints.concat([]);
            tempPoints.push(x);
            tempPoints.push(y);
            //更新多边形的线
            this.currentDrawingShape
              .getParent()
              .getChildren((element) => {
                return element.getAttr("name") === currentTool.name + "line";
              })[0]
              .setAttr("points", tempPoints);
            //更新多边形
            this.currentDrawingShape.setAttr("points", tempPoints);
            //使所有顶点在顶层显示
            this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
          }
          break;
        default:
          break;
      }
      this.layer.draw();
    },

    /**
     * 鼠标在舞台弹起
     * @param currentTool 当前选择的工具
     * @param e 传入的event对象
     */
    stageMouseup(currentTool, e) {
      switch (currentTool.type) {
        case "rect":
          this.currentDrawingShape = this.currentDrawingShape.getParent();
          if (this.currentDrawingShape.getChildren((element) => {
            return element.getClassName() === "Circle";
          }).length < 4) {
            // 矩形过小 不显示
            this.drawing = false;
            this.currentDrawingShape.destroy();
            this.rectPoints = [];
            this.$message({
              message: "矩形过小！",
              type: "warning",
              center: true,
              duration: 1000,
            });
            return;
          } else {
            //显示标签
            this.currentDrawingShape.getChildren((element) => {
              return element.getAttr("name") === currentTool.name + "label";
            })[0].show();
            this.rectPoints = [];
            this.drawing = false;
            //使所有顶点在顶层显示
            this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
          }
          break;
        case "poly":
          if (e.evt.button == 2) {
            this.currentDrawingShape = this.currentDrawingShape.getParent();
            //显示标签
            this.currentDrawingShape
              .getChildren((element) => {
                return element.getAttr("name") === currentTool.name + "label";
              })[0].show();
            //形成多边形直接发送数据
            this.$message({
              message: "成功！",
              type: "success",
              center: true,
              duration: 1000,
            });
            //右键弹起
            this.polygonPoints = [];
            //使所有顶点在顶层显示
            this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
          }
          break;
        default:
          break;
      }
      this.layer.draw();
    },
    /**
     * 多边形圆形
     * @param //x x坐标
     * @param //y y坐标
     */
    drawCircle(currentTool, x, y, group, shapePoints) {
      let vc_this = this;
      let circle = new Konva.Circle({
        name: currentTool.name + "circle",
        x: x,
        y: y,
        radius: 5 / this.scale / this.layer.scaleX(),
        visible: true, //是否显示
        fill: currentTool.anchorColor,
        stroke: currentTool.anchorColor,
        draggable: false,
        strokeWidth: 0.5,
        strokeScaleEnabled: false,
        //增加点击区域
        hitStrokeWidth: 8 / this.scale / this.layer.scaleX(),
        //设置拖动区域，不能超过舞台大小
        dragBoundFunc: function (pos) {
          //左上角
          if (pos.x < 0 && pos.y < 0) {
            return {
              x: 0,
              y: 0,
            };
          } //左侧
          else if (pos.x <= 0 && 0 <= pos.y && pos.y <= vc_this.stage.height()) {
            return {
              x: 0,
              y: pos.y,
            };
          }
          //左下角
          else if (pos.x < 0 && pos.y > vc_this.stage.height()) {
            return {
              x: 0,
              y: vc_this.stage.height(),
            };
          } //下侧
          else if (
            0 <= pos.x &&
            pos.x <= vc_this.stage.width() &&
            pos.y > vc_this.stage.height()
          ) {
            return {
              x: pos.x,
              y: vc_this.stage.height(),
            };
          } //右下角
          else if (pos.x > vc_this.stage.width() && pos.y > vc_this.stage.height()) {
            return {
              x: vc_this.stage.width(),
              y: vc_this.stage.height(),
            };
          }
          //右侧
          else if (
            pos.x > vc_this.stage.width() &&
            0 <= pos.y &&
            pos.y <= vc_this.stage.height()
          ) {
            return {
              x: vc_this.stage.width(),
              y: pos.y,
            };
          }
          //右上角
          else if (pos.x > vc_this.stage.width() && pos.y < 0) {
            return {
              x: vc_this.stage.width(),
              y: 0,
            };
          } //上侧
          else if (0 <= pos.x && pos.x <= vc_this.stage.width() && pos.y < 0) {
            return {
              x: pos.x,
              y: 0,
            };
          }
        },
      });
      group.add(circle);
      let xChange, yChange;
      circle.on("mouseover", () => {
        vc_this.stage.container().style.cursor = "pointer";
      });
      circle.on("mousedown", (e) => {
        if (!vc_this.drawing) {
          circle.draggable(true);
          //将现在绘画的对象改为group
          vc_this.currentDrawingShape = circle.getParent();
        } else {
          circle.draggable(false);
        }
        e.cancelBubble = true;
      });
      circle.on("mouseleave", () => {
        vc_this.stage.container().style.cursor = "crosshair";
      });
      circle.on("dragstart", () => {
        switch (currentTool.type) {
          case "rect":
            vc_this.currentDrawingShape = circle.getParent();
            break;
          case "poly":
            //查找拖拽了多边形的哪个点
            for (let i = 0; i < shapePoints.length; i += 2) {
              if (
                circle.getAttr("x") == shapePoints[i] &&
                circle.getAttr("y") == shapePoints[i + 1]
              ) {
                xChange = i;
                yChange = i + 1;
                break;
              }
            }
            break;
          default:
            break;
        }
      });
      circle.on("dragmove", () => {
        let x, y, circleName, anchorX, anchorY, width, height
        switch (currentTool.type) {
          case "rect":
            //查找拖拽了多边形的哪个点
            circleName = circle.name();
            //修改点位置
            anchorX = circle.getX();
            anchorY = circle.getY();
            switch (circleName) {
              case "rectTopLeft":
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectTopRight";
                  })[0]
                  .y(anchorY);
                //修改线
                shapePoints[3] = anchorY;
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectBottomLeft";
                  })[0]
                  .x(anchorX);
                shapePoints[6] = anchorX;
                //更改拖拽点的位置来改变线段
                shapePoints[0] = anchorX;
                shapePoints[1] = anchorY;
                break;
              case "rectTopRight":
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectTopLeft";
                  })[0]
                  .y(anchorY);
                shapePoints[1] = anchorY;
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectBottomRight";
                  })[0]
                  .x(anchorX);
                shapePoints[4] = anchorX;
                //更改拖拽点的位置来改变线段
                shapePoints[2] = anchorX;
                shapePoints[3] = anchorY;
                break;
              case "rectBottomRight":
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectBottomLeft";
                  })[0]
                  .y(anchorY);
                shapePoints[7] = anchorY;
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectTopRight";
                  })[0]
                  .x(anchorX);
                shapePoints[2] = anchorX;
                //更改拖拽点的位置来改变线段
                shapePoints[4] = anchorX;
                shapePoints[5] = anchorY;
                break;
              case "rectBottomLeft":
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectBottomRight";
                  })[0]
                  .y(anchorY);
                shapePoints[5] = anchorY;
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectTopLeft";
                  })[0]
                  .x(anchorX);
                shapePoints[0] = anchorX;
                //更改拖拽点的位置来改变线段
                shapePoints[6] = anchorX;
                shapePoints[7] = anchorY;
                break;
            }
            //隐藏label
            vc_this.currentDrawingShape
              .getChildren((element) => {
                return element.getAttr("name") === currentTool.name + "label";
              })[0]
              .hide();
            //修改矩形位置和大小
            vc_this.currentDrawingShape
              .getChildren((element) => {
                return element.getAttr("name") === currentTool.name + "rect";
              })[0]
              .position(
                vc_this.currentDrawingShape
                  .getChildren((element) => {
                    return element.getAttr("name") === "rectTopLeft";
                  })[0]
                  .position()
              );
            width =
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === "rectTopRight";
                })[0]
                .getX() -
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === "rectTopLeft";
                })[0]
                .getX();
            height =
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === "rectBottomLeft";
                })[0]
                .getY() -
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === "rectTopLeft";
                })[0]
                .getY();
            if (width && height) {
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === currentTool.name + "rect";
                })[0]
                .width(width);
              vc_this.currentDrawingShape
                .getChildren((element) => {
                  return element.getAttr("name") === currentTool.name + "rect";
                })[0]
                .height(height);
            }
            break;
          case "poly":
            //隐藏label
            vc_this.currentDrawingShape
              .getChildren((element) => {
                return element.getAttr("name") === currentTool.name + "label";
              })[0]
              .hide();
            x = circle.x();
            y = circle.y();
            //更改拖拽点的位置
            shapePoints[xChange] = x;
            shapePoints[yChange] = y;
            break;
          default:
            break;
        }
      });
      let label, poly, rect
      circle.on("dragend", (e) => {
        switch (currentTool.type) {
          case "rect":
            //修改标签位置
            rect = vc_this.currentDrawingShape.getChildren((node) => {
              return node.getAttr("name") === currentTool.name + "rect";
            })[0];
            label = vc_this.currentDrawingShape.getChildren((node) => {
              return node.getAttr("name") === currentTool.name + "label";
            })[0];
            label.setAttrs({
              x:
                (rect.getClientRect().x / vc_this.scale - vc_this.layer.getAttr("x")) /
                vc_this.layer.scaleX(),
              y:
                (rect.getClientRect().y / vc_this.scale - vc_this.layer.getAttr("y")) /
                vc_this.layer.scaleX(),
              visible: true,
            });
            //使所有顶点在顶层显示
            vc_this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            circle.draggable(false);
            break;
          case "poly":
            //修改标签位置
            poly = vc_this.currentDrawingShape.getChildren((node) => {
              return node.getAttr("name") === currentTool.name + "poly";
            })[0];
            label = vc_this.currentDrawingShape.getChildren((node) => {
              return node.getAttr("name") === currentTool.name + "label";
            })[0];
            label.setAttrs({
              x: poly.points()[0],
              y: poly.points()[1],
              visible: true,
            });
            //使所有顶点在顶层显示
            vc_this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            circle.draggable(false);
            break;
          default:
            break;
        }
        // vc_this.$message({
        //   message: "修改成功！",
        //   type: "success",
        //   center: true,
        //   duration: 1000,
        // });
        e.cancelBubble = true;
      });
      return circle;
    },
    drawLabel(currentTool, x, y, group, labelText) {
      let label = new Konva.Label({
        x: x,
        y: y,
        name: currentTool.name + "label",
        visible: true,
        opacity: 1,
      });
      let tag = new Konva.Tag({
        fill: currentTool.color,
      });
      let text = new Konva.Text({
        text: labelText,
        fontFamily: "Calibri",
        fontSize: 16 / this.scale / this.layer.scaleX(),
        padding: 1 / this.scale / this.layer.scaleX(),
        fill: "#fff",
      });
      label.add(tag);
      label.add(text);
      group.add(label);
      return label;
    },

    /**
     * 线
     * @param //points 坐标数组
     */
    drawLine(currentTool, points, group) {
      let line = new Konva.Line({
        name: currentTool.name + "line",
        points: points,
        stroke: currentTool.lineColor,
        strokeWidth: 1,
        visible: true,
        draggable: false,
        closed: true,
        strokeScaleEnabled: false,
        opacity: 1, //透明度
      });
      group.add(line);
      return line;
    },
    /**
     *多边形
     @param currentTool
     * @param points 多边形绘画的各个顶点，类型数组
     */
    drawPolygon(currentTool, points, group) {
      let poly = new Konva.Line({
        name: currentTool.name + "poly",
        points: points,
        /*  fill: currentTool.color, */
        stroke: currentTool.color,
        strokeWidth: 1,
        draggable: false,
        opacity: 0.5,
        lineCap: "round",
        lineJoin: "round",
        closed: true,
        strokeScaleEnabled: false,
      });
      this.currentDrawingShape = poly;
      group.add(poly);
      let vc_this = this;
      poly.getParent().on("mouseleave", () => {
        vc_this.stage.container().style.cursor = "crosshair";
      });
      poly.getParent().on("mousedown", (e) => {
        if (e.evt.button == 0) {
          //绘画结束
          if (!vc_this.drawing) {
            vc_this.stage.container().style.cursor = "move";
            //设置现在绘画节点的对象为该多边形和顶点的组
            vc_this.currentDrawingShape = poly.getParent();
            // 如果要让顶点和多边形一起拖拽，必须设置，多边形不能被拖拽
            poly.setAttr("draggable", false);
            poly.getParent().setAttr("draggable", true);
            //使所有顶点在顶层显示
            vc_this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            //添加删除撤销对象
            this.currentDel = vc_this.currentDrawingShape;
            this.currentCancel = vc_this.currentDrawingShape;
            vc_this.layer.draw();
          } else {
            vc_this.stage.container().style.cursor = "crosshair";
            poly.getParent().setAttr("draggable", false);
          }
        }
      });
      poly.getParent().on("dragend", () => {
        if (currentTool.name === vc_this.toolObject[1].name) {
          let updatePoints = [];
          let polyPoints = poly.points();
          for (let i = 0; i < polyPoints.length / 2; i++) {
            updatePoints.push(polyPoints[i * 2] + poly.getParent().x());
            updatePoints.push(polyPoints[i * 2 + 1] + poly.getParent().y());
          }
          poly.getParent().destroy();
          vc_this.currentDrawingShape = vc_this.drawGroup(
            updatePoints,
            vc_this.toolObject[1]
          );
          //使所有顶点在顶层显示
          vc_this.stage.find("Circle").forEach((element) => {
            element.moveToTop();
          });
          //添加删除撤销对象
          this.currentDel = vc_this.currentDrawingShape;
          this.currentCancel = vc_this.currentDrawingShape;
          vc_this.layer.draw();
          /*   vc_this.setMaskData(); */
        }
        // vc_this.$message({
        //   message: "修改成功！",
        //   type: "success",
        //   center: true,
        //   duration: 1000,
        // });
        vc_this.stage.container().style.cursor = "crosshair";
        //设置组不能拖动
        vc_this.currentDrawingShape.setAttr("draggable", false);
      });
      return poly;
    },

    /**
     *矩形
     * @param (currentTool, x, y, group)
     */
    drawRect(currentTool, x, y, group) {

      let rect = new Konva.Rect({
        name: currentTool.name + "rect",
        x: x,
        y: y,
        width: 0,
        height: 0,
        opacity: 0.5,
        /*   fill: currentTool.color, */
        stroke: currentTool.color,
        strokeScaleEnabled: false,
        strokeWidth: 1,
      });

      this.currentDrawingShape = rect;


      group.add(rect);

      let vc_this = this;
      rect.getParent().on("mouseleave", () => {
        vc_this.stage.container().style.cursor = "crosshair";
      });

      rect.getParent().on("mousedown", (e) => {
        if (e.evt.button == 0) {
          //如果不是正在绘画图形时
          if (!vc_this.drawing) {
            vc_this.stage.container().style.cursor = "move";
            //设置现在绘画节点的对象为该多边形和顶点的组
            vc_this.currentDrawingShape = rect.getParent();
            // 如果要让顶点和多边形一起拖拽，必须设置，多边形不能被拖拽
            rect.setAttr("draggable", false);
            rect.getParent().setAttr("draggable", true);
            //使所有顶点在顶层显示
            vc_this.stage.find("Circle").forEach((element) => {
              element.moveToTop();
            });
            //添加删除撤销对象
            this.currentDel = vc_this.currentDrawingShape;
            this.currentCancel = vc_this.currentDrawingShape;
            vc_this.layer.draw();
          } else {
            vc_this.stage.container().style.cursor = "crosshair";
            rect.getParent().setAttr("draggable", false);
          }
        }
      });
      rect.getParent().on("dragend", () => {
        if (currentTool.name === vc_this.toolObject[0].name) {
          let updatePoints = [];
          let rectPoints = rect
            .getParent()
            .getChildren((element) => {
              return element.getAttr("name") === currentTool.name + "line";
            })[0].points();
          for (let i = 0; i < rectPoints.length / 2; i++) {
            updatePoints.push(rectPoints[i * 2] + rect.getParent().x());
            updatePoints.push(rectPoints[i * 2 + 1] + rect.getParent().y());
          }
          rect.getParent().destroy();
          vc_this.currentDrawingShape = vc_this.drawGroup(
            updatePoints,
            vc_this.toolObject[0]
          );
          //添加删除撤销对象
          this.currentDel = vc_this.currentDrawingShape;
          this.currentCancel = vc_this.currentDrawingShape;
          vc_this.layer.draw();
          /*   vc_this.setMaskData(); */
        }
        //使所有顶点在顶层显示
        vc_this.stage.find("Circle").forEach((element) => {
          element.moveToTop();
        });
        // vc_this.$message({
        //   message: "修改成功！",
        //   type: "success",
        //   center: true,
        //   duration: 1000,
        // });
        vc_this.stage.container().style.cursor = "crosshair";
        //设置组不能拖动
        vc_this.currentDrawingShape.setAttr("draggable", false);
      });
      return rect;
    },

    /**
     *多边形组
     * @param points 多边形绘画的各个顶点，类型数组
     */
    drawGroup(points, currentTool) {
      //拖拽组
      let group = new Konva.Group({
        name: currentTool.name + "Group",
        draggable: false,
      });
      let poly, polyline, rect
      switch (currentTool.type) {
        case "poly":
          for (let i = 0; i < points.length / 2; i++) {
            let p = {
              x: points[i * 2],
              y: points[i * 2 + 1],
            };
            if (i == 0) {
              //添加标签
              this.drawLabel(currentTool, p.x, p.y, group, this.lanleList[this.labelsActive].name);
            }
            //添加多边形的点
            this.drawCircle(currentTool, p.x, p.y, group, points);
          }
          //绘画多边形
          poly = this.drawPolygon(currentTool, points, group);
          //添加多边形的边
          polyline = this.drawLine(currentTool, points, group);
          poly.moveToBottom();
          polyline.moveToBottom();
          this.layer.draw();
          //使所有顶点在顶层显示
          this.stage.find("Circle").forEach((element) => {
            element.moveToTop();
          });
          break;
        case "rect":
          //添加矩形的点
          for (let i = 0; i < points.length / 2; i++) {
            let p = {
              x: points[i * 2],
              y: points[i * 2 + 1],
            };
            //添加矩形的点
            this.drawCircle(currentTool, p.x, p.y, group, points);
          }
          //修改顶点的名字
          group
            .getChildren((node) => {
              return node.getClassName() === "Circle";
            })[0]
            .name("rectTopLeft");
          group
            .getChildren((node) => {
              return node.getClassName() === "Circle";
            })[1]
            .name("rectTopRight");
          group
            .getChildren((node) => {
              return node.getClassName() === "Circle";
            })[2]
            .name("rectBottomRight");
          group
            .getChildren((node) => {
              return node.getClassName() === "Circle";
            })[3]
            .name("rectBottomLeft");
          //绘制矩形
          rect = this.drawRect(currentTool, points[0], points[1], group);
          this.currentDrawingShape.setAttrs({
            width: points[4] - points[0],
            height: points[5] - points[1],
          });
          //添加矩形的边
          this.drawLine(currentTool, points, group);
          //添加标签
          this.drawLabel(
            currentTool,
            rect.getClientRect().x,
            rect.getClientRect().y,
            group,
            this.lanleList[this.labelsActive].name
          );
          //使所有顶点在顶层显示
          this.stage.find("Circle").forEach((element) => {
            element.moveToTop();
          });
          break;
        default:
          break;
      }
      this.layer.add(group);
      this.layer.draw();
      return group;
    },
  },
  async mounted() {
    let info = await this.$myInfo(this)
    this.userInfo = info
    this.getImgList().then(() => {
      this.currsrc = this.imgList[0].imgUrl
      console.log('imgList', this.imgList)
      this.initKonvaStage();
    })

    this.$nextTick(() => {
      window.addEventListener("resize", this.resizeStage);
    });
    document.oncontextmenu = function () {
      return false;
    };
    this.getAllLabel({annTaskId: this.ann_task_id})
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeStage);
    this.stage.destroy();
  },
};

</script>

<style lang="less" scoped>
.layout {
  padding: 0 16px;

  .working-area {
    background: #fff;
    margin-top: 16px;
    padding: 16px 32px;
    box-shadow: 0px 2px 16px 0px rgba(30, 36, 128, 0.07);
    border-radius: 2px;
  }
}

.tool-bar {
  width: 100%;
  margin-top: 16px;
  overflow: hidden;

  .save-btn {
    float: right;
    margin-right: 16px;
  }
}

.working-box {
  display: flex;
  width: 100%;
  justify-content: space-between;

  .image-area {
    flex: 1;
    padding-right: 16px;
    min-width: 845px;
  }

  .label-area {
    width: 288px;
    border-left: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;

    h3 {
      padding: 18px 0 18px 16px;
      line-height: 20px;
      font-size: 14px;
      border-bottom: 1px solid #e4e7ed;
      position: relative;

      .add-btn {
        position: absolute;
        right: 18px;
        top: 6px;
      }
    }

    .l-a-serch {
      padding: 8px 16px;
    }

    .l-a-hint {
      padding: 24px 0 0 16px;
      color: #909399;
      line-height: 20px;
    }

    .l-a-lis {
      padding: 4px 16px 0 16px;

      li {
        margin-top: 4px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
        padding: 0 10px;
        display: flex;
        cursor: pointer;
      }

      // span{
      //   float: left;
      // }
      .lis-word {
        // flex: 1;
        color: #303133;
        width: 170px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .lis-shortcut {
        width: 42px;
        font-size: 12px;
        color: #909399;
      }

      .lis-key {
        width: 20px;
        height: 18px;
        line-height: 18px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #c0c4cc;
        display: block;
        text-align: center;
        margin-top: 9px;
      }

      li.active,
      li:hover {
        border: 1px solid #4285f4;
      }
    }
  }

  .carousel-box {
    margin-top: 40px;
  }
}

/*@media screen and (max-width: 1560px) {
  .label-area {
    display: none;
  }
}*/

// body {
//     margin: 20px;
//     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
// }

// #controls div {
//     margin: 20px 0;
// }

// .canvas-box{
//     height: 100%;
//     width: 100%;
// }
// #canvasToolsDiv {
//     display: grid;
//     width: 100%;
//     height: 100%;
//     grid-template-columns: 64px 1fr;
//     grid-template-rows: 100%;

//     margin:0;
//     background: rgb(64,64,64);
// }
#toolbarDiv {
  position: absolute;
  left: -28px;
  top: 0px;
  z-index: 999;
  height: 486px;

  /deep/ svg {
    width: 64px;
    height: 100%;
    margin-right: 5px;
    background: #FFF;
    box-shadow: 0 0 0.5px #999, 5px 0px 10px -5px rgba(0, 0, 0, 0.8);
  }
}

#selectionDiv {
  margin-left: 30px;
}

.canvas-tools-div {
  margin-top: 16px;
  padding: 0 12px;
  position: relative;
}

.prev {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  left: 10px;
  z-index: 999;
  background: url(~@/assets/img/prev.png) no-repeat center center #FFF;
  background-size: 100% 100%;
  cursor: pointer;
}

.next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  right: 10px;
  z-index: 999;
  background: url(~@/assets/img/next.png) no-repeat center center #FFF;
  background-size: 100% 100%;
  cursor: pointer;
}

// #toolbarDiv {
//     grid-row: 1;
//     grid-column: 1/2;
//     z-index: 10;
//     height: 100%;
//     /deep/ svg{
//       width: 64px;
//       height: 100%;
//       margin-right:5px;
//       background: #666;
//       box-shadow: 0 0 0.5px #999, 5px 0px 10px -5px rgb(0,0,0);
//     }
// }


// #selectionDiv {
//     grid-row: 1;
//     grid-column: 2/3;
//     justify-self: center;
//     align-self: center;
//     margin: 5px;
//     width: calc(100% - 10px);
//     height: calc(100% - 10px);
//     background: rgb(64,64,64);
// }

// #editorDiv{
//     height: calc(100% - 80px);
// }

// #editorDiv svg {
//     box-shadow: 0px 0px 0.25px #999, 0px 0px 10px rgb(0,0,0);
// }
.file-lis-box {
  border-top: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  margin-top: 32px;
  display: flex;
  justify-content: space-between;

  .file-lis-btn {
    // icon-next-btn.png
    // float: left;
    width: 30px;
    height: 160px;
    background: url(~@/assets/img/icon-next-btn.png) no-repeat #DCDFE6 center center;
    background-size: 30px auto;
    cursor: pointer;
  }

  .file-lis-prev {
    transform: rotate(180deg);
  }

  .file-lis {
    // float: left;
    // width: calc(100% - 80px);
    // display: flex;
    // justify-content: space-between;
    // margin: 10px 10px;
    overflow: hidden;
    height: 140px;
    position: relative;

    ul {
      display: flex;
      // justify-content: space-between;
      margin: 10px 0;
      position: absolute;
      left: 0;
      top: 0;
      transform: all .3s;
    }

    li {
      // flex: 1;
      box-sizing: border-box;
      padding: 0 8px 0 0;

      .img-bg {
        // background: #303133;
        width: 210px;
        height: 140px;
        position: relative;
        border: 2px solid #fff;
        box-sizing: border-box;
      }

      // .no-img{
      //   background: #FFF;
      // }
      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;

      }
    }

    .active {
      .img-bg {
        border: 3px solid rgba(66, 133, 244, 1);
      }
    }
  }
}

#map {
  background: #ddd;
  width: 100%;
  height:600px;
  aspect-ratio: 16/9;
}
</style>
